<template>
  <el-dialog title="订单详情" :visible.sync="detailOpen" width="900px" append-to-body>
    <el-form ref="detailForm" :model="detailForm" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="驾驶员姓名" prop="driverName">
            <el-input v-model="detailForm.driverName" :readonly="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶员身份证" prop="driverCard">
            <el-input v-model="detailForm.driverCard" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="username">
            <el-input v-model="detailForm.username" :readonly="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户手机号" prop="utelphone">
            <el-input v-model="detailForm.utelphone" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号" prop="orderNum">
            <el-input v-model="detailForm.orderNum" :readonly="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号" prop="carNum">
            <el-input v-model="detailForm.carNum" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆名称" prop="carName">
            <el-input v-model="detailForm.carName" :readonly="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计开始时间" prop="bookStartTime">
            <el-input v-model="detailForm.bookStartTime" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="预计结束时间" prop="bookEndTime">
            <el-input v-model="detailForm.bookEndTime" :readonly="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总天数" prop="day">
            <el-input v-model="detailForm.day" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="detailForm.status" placeholder="请选择订单状态" :disabled="true">
              <el-option
                v-for="dict in dict.type.vhiceodr_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆天单价" prop="money">
            <el-input v-model="formatMoneyValue" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否退车辆押金" prop="isReturnVehdeposit">
            <el-select v-model="detailForm.isReturnVehdeposit" :disabled="true">
              <el-option
                v-for="dict in dict.type.order_is_return_vehdeposit"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否退违章押金" prop="isReturnViodeposit">
            <el-select v-model="detailForm.isReturnViodeposit" :disabled="true">
              <el-option
                v-for="dict in dict.type.order_is_return_viodeposit"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="取车地址" prop="pickUpAddress">
            <el-input v-model="detailForm.pickUpAddress" :readonly="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付类型" prop="payType">
            <el-select v-model="detailForm.payType" :disabled="true">
              <el-option
                v-for="dict in dict.type.vehicle_order_paytype"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆押金" prop="depositMoney">
            <el-input v-model="detailForm.vhceDeposit" :readonly="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="违章押金" prop="voainDeposit">
            <el-input v-model="detailForm.voainDeposit" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单分类" prop="orderCategorize">
            <el-select v-model="detailForm.orderCategorize" :disabled="true">
              <el-option
                v-for="dict in dict.type.order_categorize"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用车单位" prop="usingUnitName">
            <el-input v-model="detailForm.usingUnitName" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="detailForm.remark" type="textarea"
                      :autosize="{minRows: 3, maxRows: 6}" :style="{width: '100%'}" :readonly="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  name: "detailOrdewr",
  dicts: ['order_isuse', 'order_membertype', 'order_ispay', 'order_istui', 'wehicle_iszx', 'order_open_zx_service', 'order_active', 'order_ispl', 'order_gettype','vehicle_source',
    'order_display', 'order_type', 'vehicle_order_status', 'vehicle_order_paytype', 'order_is_return_vehdeposit', 'order_is_return_viodeposit', 'order_source', 'order_categorize', 'order_servicetype', 'vehicle_order_paytype', 'vhiceodr_status'],
  computed: {
    formatMoneyValue() {
      return '￥' + this.detailForm.money + '/天';
    },
    formatTotalMoneyValue() {
      return '￥' + this.detailForm.totalMoney;
    },
    formatVehComAmountValue() {
      if (this.detailForm.vehComAmount != null) {
        return '￥' + this.detailForm.vehComAmount;
      } else {
        return '';
      }
    },
    formatPrepayMoneyValue() {
      return '￥' + this.detailForm.prepayMoney;
    },
    formatRefundMoneyValue() {
      if (this.detailForm.refundMoney != null) {
        return '￥' + this.detailForm.refundMoney;
      } else {
        return '';
      }
    },
    formatDepositMoneyValue() {
      return '￥' + this.detailForm.depositMoney;
    },
    formatViolationDepositValue() {
      if (this.detailForm.voainDeposit != null) {
        return '￥' + this.detailForm.voainDeposit;
      } else {
        return '';
      }
    },
    formatDeliveryValue() {
      if (this.detailForm.snatchPersonName != null) {
        return this.detailForm.snatchPersonName;
      } else {
        return this.detailForm.deliveryName;
      }
    }
  },
  data() {
    return {
      detailOpen: false,
      detailForm: {}
    }
  }, methods: {
    // 取消查看订单详情按钮
    cancelViewOrder() {
      this.detailOpen = false;
    },
    open(info) {
      if (info) {
        this.detailForm = info
      }
      this.title = '查看详情'
      this.detailOpen = true
    },
  }
}
</script>

<style scoped lang="scss">

</style>
